<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <p>Mr.Wish</p>
    </div>
    <div class="main">
      <div class="shang">
        <div class="picture"></div>
        <div class="nickName"></div>
      </div>
      <div class="zhong">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          style="height: 475px"
        >
          <van-swipe-item
            ><img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
              alt=""
          /></van-swipe-item>

          <van-swipe-item
            ><img
              src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
      <div class="xia">
        <p>家人们~快来签收你的发货说明</p>
        <p>听说有家人们反馈了一些发货的问题，在这里同意解答 一下哦！</p>
      </div>
    </div>
    <div class="footer">
      <van-icon name="arrow-left" class="c" />
      <van-icon name="arrow" class="c" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 100);
  position: relative;
}

.header p {
  width: 232px;
  height: 26px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-weight: 700;
  font-family: SourceHanSansSC-medium;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main {
  flex: 1;
}
.shang {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
}
.zhong img {
  width: 100%;
  height: 100%;
}
.picture {
  width: 38px;
  height: 38px;
  margin-left: 32px;
  background-color: rgba(206, 206, 206, 100);
}
.nickName {
  width: 68px;
  height: 24px;
  margin-left: 14px;
  background-color: rgba(239, 239, 239, 100);
}
.xia {
  margin: 0 18px 0 21px;
}
.xia p:nth-child(1) {
  color: rgba(79, 79, 79, 100);
  font-size: 20px;
  font-family: SourceHanSansSC-regular;
  margin-bottom: 9px;
}
.xia p:nth-child(2) {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: PingFangSC-regular;
}
.footer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
}
.footer .c {
  background-color: rgba(248, 248, 248, 100);
}
</style>
